<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/detail.css}">
    <script language="JavaScript">
        function showDelImg(imgId) {
            if (null != document.getElementById(imgId)) {
                document.getElementById(imgId).style.display = 'inline';
            }
        }

        function hiddenDelImg(imgId) {
            if (null != document.getElementById(imgId)) {
                document.getElementById(imgId).style.display = 'none';
            }
        }

        function delReply(replyId, topicId) {
            if (window.confirm("是否需要删除?")) {
                window.location.href = 'reply.do?operate=delReply&replyId=' + replyId + "&topicId=" + topicId;
            }
        }

        function getTopic() {
            window.location.href = "page.do?operate=page&page=frames/main";
        }
    </script>
</head>
<body>
<div id="div_back_to_topic_list">
    <a href="#" th:onclick="|getTopic()|">返回日志列表</a>
</div>
<div id="div_topic_detail">
    <div id="div_topic_info">
        <table id="tbl_topic_info">
            <tr>
                <td rowspan="2" class="w14 h96">
                    <div class="h64 center " style="width:100%;">
                        <img class="img56 " th:src="@{|/imgs/${session.topic.author.headImg}|}"/>
                    </div>
                    <div class="h32 center" style="width:100%;" th:text="${session.topic.author.nickName}">乔峰</div>
                </td>
                <td class="topic_title" onmousemove="showDelImg('img01')"
                    onmouseout="hiddenDelImg('img01')">
                    <img id="img01"
                         style="float: right;margin-top:2px;margin-right:2px;display: none;width:24px;height: 24px;"
                         th:src="@{/imgs/del.jpg}"
                         th:if="${session.userBasic.id==session.friend.id}"/>
                    <span th:text=" ${session.topic.title}">《萧某今天就和天下群雄决一死战，你们一起上吧！》</span>
                    <span class="title_date_right"
                          th:text="${#dates.format(session.topic.topicDate,'yyyy-MM-dd HH:mm:ss')}">2021-09-01 12:30:55</span>
                </td>
            </tr>
            <tr>
                <td th:text="${session.topic.content}">杀母大仇, 岂可当作买卖交易？此仇能报便报, 如不能报, 则我父子毕命于此便了。这等肮脏之事, 岂是我萧氏父子所屑为？</td>
            </tr>
        </table>
    </div>
    <div id="div_reply_list">
        <table class="tbl_reply_info" th:each="reply : ${session.topic.replyList}">
            <tr>
                <td rowspan="2" class="w14 h88">
                    <div class="h56 center" style="width:100%;">
                        <!--headImg:<span th:text="${reply.author.headImg}"></span><br/>
                        nickName:<span th:text="${reply.author.nickName}"></span>-->
                        <img class="img48" th:src="@{|/imgs/${reply.author.headImg}|}"/>
                    </div>
                    <div class="h32 center" style="width:100%;" th:text="${reply.author.nickName}">段誉</div>
                </td>
                <td class="reply_title" th:onmouseover="|showDelImg('img${reply.id}')|"
                    th:onmouseout="|hiddenDelImg('img${reply.id}')|">
                    <span th:text="|回复:${session.topic.title}|">萧某今天就和天下群雄决一死战，你们一起上吧！</span>
                    <!-- 删除图标出现的条件
                     1.在我自己的空间 session.userBasic.id==session.friend.id
                     2.当前回复的作者就是我本人session.userBasic.id==reply.author.id-->
                    <img align="right" style="display: none"
                         th:if="${session.userBasic.id==session.friend.id || session.userBasic.id==reply.author.id}"
                         th:id="|img${reply.id}|" class="delReplyImg" th:src="@{/imgs/del.jpg}"
                         th:onclick="|delReply(${reply.id} , ${session.topic.id})|"/>
                    <span class="title_date_right" th:text="${#dates.format(reply.replyDate,'yyyy-MM-dd HH:mm:ss')}">2021-09-01 14:35:15</span>
                </td>
            </tr>
            <tr>
                <!--reply.hostReply:<span th:text="${reply.hostReply}"></span><br/>-->
                <!--reply.content:<span th:text="${reply.content}"></span>-->
                <td th:onmouseover="|showDelImg('a${reply.id}')|"
                    th:onmouseout="|hiddenDelImg('a${reply.id}')|">
                    <span th:text="${reply.content}">你可曾见过边关之上、宋辽相互仇杀的惨状？可曾见过宋人辽人妻离子散、家破人亡的情景？宋辽之间好容易罢兵数十年, 倘若刀兵再起, 契丹铁骑侵入南朝, 你可知将有多少宋人惨遭横死？多少辽人死于非命？!</span><br/>
                    <ul style="width: 96%;border:1px dotted lightgray;list-style-type: none;padding-left:8px;padding-right:8px;"
                        th:if="${reply.hostReply != null}">
                        <li style="color:#6e0000;font-size:12px;width: 100%;border:0px solid red;"
                            th:text="${reply.hostReply.content}">
                            你以为我是慕容复的人，所以和我比试？段兄弟年纪轻轻，就有如此武学修为，实属罕见！武林早已盛传大理段氏有一门绝学，叫六脉神剑，能以无形剑气杀人，果然真有此门神功！
                        </li>
                        <li style="color:#6e0000;font-size:12px;width:100%;border:0px solid blue;text-align: right;margin-right: 8px;"
                            th:text="|主人回复于${#dates.format(reply.hostReply.hostReplyDate,'yyyy-MM-dd HH:mm:ss')}|">
                            主人回复于2021/10/01 11:50:30
                        </li>
                    </ul>
                    <!--<a th:id="|a${reply.id}|"-->
                    <!--   th:if="${session.userBasic.id==session.friend.id && reply.author.id == session.userBasic.id}"-->
                    <!--   href="#" style="float: right;display: none;">你的回复</a>-->

                    <div th:id="|a${reply.id}|" style="float: right;display:none;width:80%"
                         th:if="${session.userBasic.id==session.friend.id}" th:unless="${reply.hostReply!=null}">
                        <p class="add_reply_title">添加主人回复</p>
                        <form action="hostreply.do" method="post">
                            <input type="hidden" name="operate" value="addHostReply"/>
                            <input type="hidden" name="replyId" th:value="${reply.id}"/>
                            <textarea name="content" rows="3">这里是主人回复！</textarea><br/>
                            <input type="submit" value=" 回 复 "/>
                        </form>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="div_add_reply">
    <p class="add_reply_title">添加回复</p>
    <form action="reply.do" method="post">
        <input type="hidden" name="operate" value="addReply"></input>
        <input type="hidden" name="topicId" th:value="${session.topic.id}"></input>
        <table>
            <tr>
                <th style="width: 25%">回复日志：</th>
                <td><input type="text" th:value="|《${session.topic.title}》|" value="《萧某今天就和天下群雄决一死战，你们一起上吧！》" readonly/>
                </td>
            </tr>
            <tr>
                <th>回复内容：</th>
                <td><textarea rows="3" name="content"></textarea></td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit" value=" 回 复 "/>
                    <input type="reset" value=" 重 置 "/>
                </th>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
